<!DOCTYPE html>
<html lang="en-us">
    <head><meta charset='utf-8'>
<meta name='viewport' content='width=device-width, initial-scale=1'><meta name='description' content='第一篇博客当然是写怎么搭环境啦'><title>一些示例和注意事项</title>

<link rel='canonical' href='http://139.159.193.50:2021/p/%E4%B8%80%E4%BA%9B%E7%A4%BA%E4%BE%8B%E5%92%8C%E6%B3%A8%E6%84%8F%E4%BA%8B%E9%A1%B9/'>

<link rel="stylesheet" href="/scss/style.min.css"><meta property='og:title' content='一些示例和注意事项'>
<meta property='og:description' content='第一篇博客当然是写怎么搭环境啦'>
<meta property='og:url' content='http://139.159.193.50:2021/p/%E4%B8%80%E4%BA%9B%E7%A4%BA%E4%BE%8B%E5%92%8C%E6%B3%A8%E6%84%8F%E4%BA%8B%E9%A1%B9/'>
<meta property='og:site_name' content='Wonderland'>
<meta property='og:type' content='article'><meta property='article:section' content='Post' /><meta property='article:tag' content='这是文章的标签' /><meta property='article:published_time' content='2021-08-06T21:16:10&#43;08:00'/><meta property='article:modified_time' content='2021-08-06T21:16:10&#43;08:00'/><meta property='og:image' content='http://139.159.193.50:2021/p/%E4%B8%80%E4%BA%9B%E7%A4%BA%E4%BE%8B%E5%92%8C%E6%B3%A8%E6%84%8F%E4%BA%8B%E9%A1%B9/test.jpg' />
<meta name="twitter:title" content="一些示例和注意事项">
<meta name="twitter:description" content="第一篇博客当然是写怎么搭环境啦"><meta name="twitter:card" content="summary_large_image">
    <meta name="twitter:image" content='http://139.159.193.50:2021/p/%E4%B8%80%E4%BA%9B%E7%A4%BA%E4%BE%8B%E5%92%8C%E6%B3%A8%E6%84%8F%E4%BA%8B%E9%A1%B9/test.jpg' />
    </head>
    <body class="
    article-page has-toc
">
    <script>
        (function() {
            const colorSchemeKey = 'StackColorScheme';
            if(!localStorage.getItem(colorSchemeKey)){
                localStorage.setItem(colorSchemeKey, "auto");
            }
        })();
    </script><script>
    (function() {
        const colorSchemeKey = 'StackColorScheme';
        const colorSchemeItem = localStorage.getItem(colorSchemeKey);
        const supportDarkMode = window.matchMedia('(prefers-color-scheme: dark)').matches === true;

        if (colorSchemeItem == 'dark' || colorSchemeItem === 'auto' && supportDarkMode) {
            

            document.documentElement.dataset.scheme = 'dark';
        } else {
            document.documentElement.dataset.scheme = 'light';
        }
    })();
</script>
<div class="container main-container flex 
    
        extended
    
">
    
        <div id="article-toolbar">
            <a href="http://139.159.193.50:2021/" class="back-home">
                <svg xmlns="http://www.w3.org/2000/svg" class="icon icon-tabler icon-tabler-chevron-left" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round">
  <path stroke="none" d="M0 0h24v24H0z"/>
  <polyline points="15 6 9 12 15 18" />
</svg>



                <span>Back</span>
            </a>
        </div>
    
<main class="main full-width">
    <article class="has-image main-article">
    <header class="article-header">
        <div class="article-image">
            <a href="/p/%E4%B8%80%E4%BA%9B%E7%A4%BA%E4%BE%8B%E5%92%8C%E6%B3%A8%E6%84%8F%E4%BA%8B%E9%A1%B9/">
                <img src="/p/%E4%B8%80%E4%BA%9B%E7%A4%BA%E4%BE%8B%E5%92%8C%E6%B3%A8%E6%84%8F%E4%BA%8B%E9%A1%B9/test_huf941de4769045cdfa8c9ee7036519a2a_35369_800x0_resize_q75_box.jpg"
                        srcset="/p/%E4%B8%80%E4%BA%9B%E7%A4%BA%E4%BE%8B%E5%92%8C%E6%B3%A8%E6%84%8F%E4%BA%8B%E9%A1%B9/test_huf941de4769045cdfa8c9ee7036519a2a_35369_800x0_resize_q75_box.jpg 800w, /p/%E4%B8%80%E4%BA%9B%E7%A4%BA%E4%BE%8B%E5%92%8C%E6%B3%A8%E6%84%8F%E4%BA%8B%E9%A1%B9/test_huf941de4769045cdfa8c9ee7036519a2a_35369_1600x0_resize_q75_box.jpg 1600w"
                        width="800" 
                        height="566" 
                        loading="lazy"
                        alt="Featured image of post 一些示例和注意事项" />
                
            </a>
        </div>
    

    <div class="article-details">
    
    <header class="article-category">
        
            <a href="/categories/%E6%B5%8B%E8%AF%95/" >
                测试
            </a>
        
    </header>
    

    <h2 class="article-title">
        <a href="/p/%E4%B8%80%E4%BA%9B%E7%A4%BA%E4%BE%8B%E5%92%8C%E6%B3%A8%E6%84%8F%E4%BA%8B%E9%A1%B9/">一些示例和注意事项</a>
    </h2>

    
    <h3 class="article-subtitle">
        第一篇博客当然是写怎么搭环境啦
    </h3>
    

    
    <footer class="article-time">
        
            <div>
                <svg xmlns="http://www.w3.org/2000/svg" class="icon icon-tabler icon-tabler-calendar-time" width="56" height="56" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round">
  <path stroke="none" d="M0 0h24v24H0z"/>
  <path d="M11.795 21h-6.795a2 2 0 0 1 -2 -2v-12a2 2 0 0 1 2 -2h12a2 2 0 0 1 2 2v4" />
  <circle cx="18" cy="18" r="4" />
  <path d="M15 3v4" />
  <path d="M7 3v4" />
  <path d="M3 11h16" />
  <path d="M18 16.496v1.504l1 1" />
</svg>
                <time class="article-time--published">Aug 06, 2021</time>
            </div>
        

        
            <div>
                <svg xmlns="http://www.w3.org/2000/svg" class="icon icon-tabler icon-tabler-clock" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round">
  <path stroke="none" d="M0 0h24v24H0z"/>
  <circle cx="12" cy="12" r="9" />
  <polyline points="12 7 12 12 15 15" />
</svg>



                <time class="article-time--reading">
                    1 min read
                </time>
            </div>
        
    </footer>
    
</div>
</header>

    <section class="article-content">
    <p><a class="link" href="https://gohugo.io/content-management/"  target="_blank" rel="noopener"
    >官方的content management文档</a></p>
<p><a class="link" href="https://docs.stack.jimmycai.com/zh/writing/supported-front-matter-fields.html"  target="_blank" rel="noopener"
    >本主题支持的 FrontMatter</a></p>
<p><a class="link" href="https://demo.stack.jimmycai.com/"  target="_blank" rel="noopener"
    >本主题的示例网站，里面有很多示例</a>，包括但不限于：</p>
<ul>
<li>中文测试</li>
<li>图片测试</li>
<li>markdown 风格测试</li>
<li>富文本（嵌入视频）</li>
<li>数学公式支持</li>
<li>emoji支持</li>
</ul>
<p>下面的部分不会在首页显示。但是在hugo里好像并没有什么影响。</p>
<h2 id="一些注意事项">一些注意事项</h2>
<ol>
<li>一篇文章占据一个文件夹。里面的文件名必须是叫做<code>index.md</code>，否则会导致图片无法解析。
<figure style="flex-grow: 141; flex-basis: 338px">
		<a href="/p/%E4%B8%80%E4%BA%9B%E7%A4%BA%E4%BE%8B%E5%92%8C%E6%B3%A8%E6%84%8F%E4%BA%8B%E9%A1%B9/test.jpg" data-size="1000x708"><img src="/p/%E4%B8%80%E4%BA%9B%E7%A4%BA%E4%BE%8B%E5%92%8C%E6%B3%A8%E6%84%8F%E4%BA%8B%E9%A1%B9/test.jpg"
				srcset="/p/%E4%B8%80%E4%BA%9B%E7%A4%BA%E4%BE%8B%E5%92%8C%E6%B3%A8%E6%84%8F%E4%BA%8B%E9%A1%B9/test_huf941de4769045cdfa8c9ee7036519a2a_35369_480x0_resize_q75_box.jpg 480w, /p/%E4%B8%80%E4%BA%9B%E7%A4%BA%E4%BE%8B%E5%92%8C%E6%B3%A8%E6%84%8F%E4%BA%8B%E9%A1%B9/test_huf941de4769045cdfa8c9ee7036519a2a_35369_1024x0_resize_q75_box.jpg 1024w"
				width="1000"
				height="708"
				loading="lazy"
				alt="test photo">
		</a>
		
		<figcaption>test photo</figcaption>
		
	</figure></li>
</ol>
<h2 id="在服务器部署博客">在服务器部署博客</h2>
<p>众所周知，<code>hugo server</code>只能在本地启动一个端口提供服务，直接使用<code>hugo</code>可以生成一个<code>public/</code>文件夹，里面就是一些静态网页的文件。</p>
<p>那么我们要做的就是把这个文件夹拷贝到服务器里就好了；经过在官网文档的一番探索，我决定使用<code>Rsync</code>进行部署。</p>
<h3 id="第一步">第一步</h3>
<p>把本地的<code>ssh</code>密钥拷贝到服务器里。</p>
<div class="highlight"><pre tabindex="0" class="chroma"><code class="language-sh" data-lang="sh">ssh-keygen <span class="c1"># 在服务器生成密钥</span>
cp id_rsa.pub authorized_keys <span class="c1"># 把本地的公钥写入的服务器的 authorized_keys 中，这样用ssh登录时就不需要输密码了</span>
</code></pre></div><h3 id="第二步">第二步</h3>
<p>在项目根目录创建一个 shell 脚本，我创建为 <code>deploy.sh</code></p>
<p>内容如下</p>
<div class="highlight"><pre tabindex="0" class="chroma"><code class="language-sh" data-lang="sh"><span class="cp">#!/bin/sh
</span><span class="cp"></span><span class="nv">USER</span><span class="o">=</span>root
<span class="nv">HOST</span><span class="o">=</span>服务器的ip地址
<span class="nv">DIR</span><span class="o">=</span>服务器上要存放的目录
hugo <span class="o">&amp;&amp;</span> rsync -avz --delete public/ <span class="si">${</span><span class="nv">USER</span><span class="si">}</span>@<span class="si">${</span><span class="nv">HOST</span><span class="si">}</span>:<span class="si">${</span><span class="nv">DIR</span><span class="si">}</span>
<span class="nb">exit</span> <span class="m">0</span>
</code></pre></div><p>对这个文件进行 <code>chmod +x deploy.sh</code>，以后就可以用<code>./deploy.sh</code>命令来上传静态网站文件了。</p>
<h3 id="第三步">第三步</h3>
<p>我使用的 nginx + docker 的形式进行提供 web 服务。因为自己安装的话可能会导致自己不知道改了哪些东西；卸载重装可能又没有卸载干净，比较麻烦。</p>
<div class="highlight"><pre tabindex="0" class="chroma"><code class="language-docker" data-lang="docker">docker pull nginx <span class="c1"># 拉取最新的 nginx 镜像</span><span class="err">
</span></code></pre></div><p>因为目前这个华为云的服务器还没有域名，我已经备案域名在腾讯云的服务器上，所以暂时还不需要修改nginx的配置文件。只需要将静态网页所在的文件夹挂载到容器里即可。</p>
<div class="highlight"><pre tabindex="0" class="chroma"><code class="language-docker" data-lang="docker">docker run --name hugo -p 2021:80 -v /root/site:/usr/share/nginx/html -d nginx<span class="err">
</span><span class="err">
</span><span class="err"></span><span class="c"># --name: 重命名 container 为 hugo，方便查找</span><span class="err">
</span><span class="err"></span><span class="c"># -p: 将容器内的 80 端口映射到主机的 2021 端口</span><span class="err">
</span><span class="err"></span><span class="c"># -v: 将主机的 /root/site 文件夹挂载到内部的 /usr/share/nginx/html；由于原先的配置文件里显示的网页就是在这个目录的，所以我们只需要挂载即可</span><span class="err">
</span><span class="err"></span><span class="c"># -d: 设置容器一直在后台运行</span><span class="err">
</span></code></pre></div><p>当服务器可以配置域名后，可以挂载一下相关的配置文件。配置文件见本博客的 <a class="link" href="https://github.com/Lincyaw/blog-on-server"  target="_blank" rel="noopener"
    >github 仓库</a>的<code>nginx-configs</code>。里面放的是 nginx 容器里默认的配置。</p>
<p>配置目录分别在：</p>
<pre><code>/etc/nginx/nginx.conf
/etc/nginx/conf.d/default.conf
</code></pre><p>其实也不难发现，在<code>nginx.conf</code>文件夹里的最后一行写着 <code>include /etc/nginx/conf.d/*.conf;</code>，表明<code>nginx.conf</code>类似于一个总的文件，包含了<code>conf.d</code>里的所有带<code>.conf</code>后缀的配置。</p>
<p>到时候只需要修改对应的配置文件，然后将其挂载到 docker 里即可。</p>
</section>


    <footer class="article-footer">
    
    <section class="article-tags">
        
            <a href="/tags/%E8%BF%99%E6%98%AF%E6%96%87%E7%AB%A0%E7%9A%84%E6%A0%87%E7%AD%BE/">这是文章的标签</a>
        
    </section>


    
    <section class="article-copyright">
        <svg xmlns="http://www.w3.org/2000/svg" class="icon icon-tabler icon-tabler-copyright" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round">
  <path stroke="none" d="M0 0h24v24H0z"/>
  <circle cx="12" cy="12" r="9" />
  <path d="M14.5 9a3.5 4 0 1 0 0 6" />
</svg>



        <span>Licensed under CC BY-NC-SA 4.0</span>
    </section>
    </footer>


    
        <link 
                rel="stylesheet" 
                href="https://cdn.jsdelivr.net/npm/katex@0.13.13/dist/katex.min.css"integrity="sha384-RZU/ijkSsFbcmivfdRBQDtwuwVqK7GMOw6IMvKyeWL2K5UAlyp6WonmB8m7Jd0Hn"crossorigin="anonymous"
            ><script 
                src="https://cdn.jsdelivr.net/npm/katex@0.13.13/dist/katex.min.js"integrity="sha384-pK1WpvzWVBQiP0/GjnvRxV4mOb0oxFuyRxJlk6vVw146n3egcN5C925NCP7a7BY8"crossorigin="anonymous"
                defer="true"
                >
            </script><script 
                src="https://cdn.jsdelivr.net/npm/katex@0.13.13/dist/contrib/auto-render.min.js"integrity="sha384-vZTG03m&#43;2yp6N6BNi5iM4rW4oIwk5DfcNdFfxkk9ZWpDriOkXX8voJBFrAO7MpVl"crossorigin="anonymous"
                defer="true"
                >
            </script><script>
    window.addEventListener("DOMContentLoaded", () => {
        renderMathInElement(document.querySelector(`.article-content`), {
            delimiters: [
                { left: "$$", right: "$$", display: true },
                { left: "$", right: "$", display: false },
                { left: "\\(", right: "\\)", display: false },
                { left: "\\[", right: "\\]", display: true }
            ]
        });})
</script>
    
</article>

    <aside class="related-contents--wrapper">
    
    
        <h2 class="section-title">Related contents</h2>
        <div class="related-contents">
            <div class="flex article-list--tile">
                
                    
<article class="">
    <a href="/p/%E6%96%B0%E7%8E%AF%E5%A2%83%E6%B5%8B%E8%AF%95/">
        
        

        <div class="article-details">
            <h2 class="article-title">新环境测试</h2>
        </div>
    </a>
</article>
                
            </div>
        </div>
    
</aside>

     
     
        
    <div class="disqus-container">
    <div id="disqus_thread"></div>
<script type="application/javascript">
    var disqus_config = function () {
    
    
    
    };
    (function() {
        if (["localhost", "127.0.0.1"].indexOf(window.location.hostname) != -1) {
            document.getElementById('disqus_thread').innerHTML = 'Disqus comments not available by default when the website is previewed locally.';
            return;
        }
        var d = document, s = d.createElement('script'); s.async = true;
        s.src = '//' + "hugo-theme-stack" + '.disqus.com/embed.js';
        s.setAttribute('data-timestamp', +new Date());
        (d.head || d.body).appendChild(s);
    })();
</script>
<noscript>Please enable JavaScript to view the <a href="https://disqus.com/?ref_noscript">comments powered by Disqus.</a></noscript>
<a href="https://disqus.com" class="dsq-brlink">comments powered by <span class="logo-disqus">Disqus</span></a>
</div>

<style>
    .disqus-container {
        background-color: var(--card-background);
        border-radius: var(--card-border-radius);
        box-shadow: var(--shadow-l1);
        padding: var(--card-padding);
    }
</style>

<script>
    window.addEventListener('onColorSchemeChange', (e) => {
        if (DISQUS) {
            DISQUS.reset({
                reload: true
            });
        }
    })
</script>

    

    <footer class="site-footer">
    <section class="copyright">
        &copy; 
        
            2020 - 
        
        2021 Wonderland
    </section>
    
    <section class="powerby">
        Built with <a href="https://gohugo.io/" target="_blank" rel="noopener">Hugo</a> <br />
        Theme <b><a href="https://github.com/CaiJimmy/hugo-theme-stack" target="_blank" rel="noopener" data-version="2.5.0">Stack</a></b> designed by <a href="https://jimmycai.com" target="_blank" rel="noopener">Jimmy</a>
    </section>
</footer>

    
<div class="pswp" tabindex="-1" role="dialog" aria-hidden="true">

    
    <div class="pswp__bg"></div>

    
    <div class="pswp__scroll-wrap">

        
        <div class="pswp__container">
            <div class="pswp__item"></div>
            <div class="pswp__item"></div>
            <div class="pswp__item"></div>
        </div>

        
        <div class="pswp__ui pswp__ui--hidden">

            <div class="pswp__top-bar">

                

                <div class="pswp__counter"></div>

                <button class="pswp__button pswp__button--close" title="Close (Esc)"></button>

                <button class="pswp__button pswp__button--share" title="Share"></button>

                <button class="pswp__button pswp__button--fs" title="Toggle fullscreen"></button>

                <button class="pswp__button pswp__button--zoom" title="Zoom in/out"></button>

                
                
                <div class="pswp__preloader">
                    <div class="pswp__preloader__icn">
                        <div class="pswp__preloader__cut">
                            <div class="pswp__preloader__donut"></div>
                        </div>
                    </div>
                </div>
            </div>

            <div class="pswp__share-modal pswp__share-modal--hidden pswp__single-tap">
                <div class="pswp__share-tooltip"></div>
            </div>

            <button class="pswp__button pswp__button--arrow--left" title="Previous (arrow left)">
            </button>

            <button class="pswp__button pswp__button--arrow--right" title="Next (arrow right)">
            </button>

            <div class="pswp__caption">
                <div class="pswp__caption__center"></div>
            </div>

        </div>

    </div>

</div><script 
                src="https://cdn.jsdelivr.net/npm/photoswipe@4.1.3/dist/photoswipe.min.js"integrity="sha256-ePwmChbbvXbsO02lbM3HoHbSHTHFAeChekF1xKJdleo="crossorigin="anonymous"
                defer="true"
                >
            </script><script 
                src="https://cdn.jsdelivr.net/npm/photoswipe@4.1.3/dist/photoswipe-ui-default.min.js"integrity="sha256-UKkzOn/w1mBxRmLLGrSeyB4e1xbrp4xylgAWb3M42pU="crossorigin="anonymous"
                defer="true"
                >
            </script><link 
                rel="stylesheet" 
                href="https://cdn.jsdelivr.net/npm/photoswipe@4.1.3/dist/default-skin/default-skin.css"integrity="sha256-c0uckgykQ9v5k&#43;IqViZOZKc47Jn7KQil4/MP3ySA3F8="crossorigin="anonymous"
            ><link 
                rel="stylesheet" 
                href="https://cdn.jsdelivr.net/npm/photoswipe@4.1.3/dist/photoswipe.css"integrity="sha256-SBLU4vv6CA6lHsZ1XyTdhyjJxCjPif/TRkjnsyGAGnE="crossorigin="anonymous"
            >

            </main>
    
        <aside class="sidebar right-sidebar sticky">
            <section class="widget archives">
                <div class="widget-icon">
                    <svg xmlns="http://www.w3.org/2000/svg" class="icon icon-tabler icon-tabler-hash" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round">
  <path stroke="none" d="M0 0h24v24H0z"/>
  <line x1="5" y1="9" x2="19" y2="9" />
  <line x1="5" y1="15" x2="19" y2="15" />
  <line x1="11" y1="4" x2="7" y2="20" />
  <line x1="17" y1="4" x2="13" y2="20" />
</svg>



                </div>
                <h2 class="widget-title section-title">Table of contents</h2>
                
                <div class="widget--toc">
                    <nav id="TableOfContents">
  <ol>
    <li><a href="#一些注意事项">一些注意事项</a></li>
    <li><a href="#在服务器部署博客">在服务器部署博客</a>
      <ol>
        <li><a href="#第一步">第一步</a></li>
        <li><a href="#第二步">第二步</a></li>
        <li><a href="#第三步">第三步</a></li>
      </ol>
    </li>
  </ol>
</nav>
                </div>
            </section>
        </aside>
    

        </div>
        <script 
                src="https://cdn.jsdelivr.net/npm/node-vibrant@3.1.5/dist/vibrant.min.js"integrity="sha256-5NovOZc4iwiAWTYIFiIM7DxKUXKWvpVEuMEPLzcm5/g="crossorigin="anonymous"
                defer="false"
                >
            </script><script type="text/javascript" src="/ts/main.js" defer></script>
<script>
    (function () {
        const customFont = document.createElement('link');
        customFont.href = "https://fonts.googleapis.com/css2?family=Lato:wght@300;400;700&display=swap";

        customFont.type = "text/css";
        customFont.rel = "stylesheet";

        document.head.appendChild(customFont);
    }());
</script>

    </body>
</html>
